<template>
	<view class="chat-one-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" :title="friendInfo.nick">
			</c-navigation-bar>
			<view class="chat-main">
				<view class="chat-msg-list">
					<messageList ref="msgList" :messageHasMore="!isCompleted" :messageList="messageList"
						:scrollTop="scrollTop" @loadMore="loadMore">
					</messageList>
				</view>
				<view class="chat-foot-operate">
					<messagrFooter @send="sendMsg"></messagrFooter>
				</view>
			</view>
		</c-layout>
	</view>
</template>

<script>
	import {
		sendMessageToUser,
		getMessageList,
		getFriendsInfo,
		delMessage,
		setCharReady,
		chatReady,
		addListening,
		delListening
	} from '@/common/tx_im.js'
	import messageList from './components/messageList.vue'
	import messagrFooter from './components/chatFootOperate.vue'
	export default {
		components: {
			messageList,
			messagrFooter
		},
		data() {

			return {
				friendInfo: {
					nick: ""
				},
				messageList: [],
				scrollTop: 9999999,
				chatUserId: "", // 当前聊天用户的id
				nextReqMessageID: "", //nextPage
				isCompleted: false, // 是否有下一跳
				currentRoutePath: ""
			};
		},
		onLoad(urlData) {
			const currentRoutes = getCurrentPages()
			this.currentRoutePath = currentRoutes[currentRoutes.length - 1].route
			this.chatUserId = urlData.id
			const fnc = () => {
				// 获取用户信息
				this.getFromUserInfo(urlData.id)
				this.getMessageList()
			}
			if (chatReady) {
				fnc()
			} else {
				setCharReady(fnc)
			}
		},
		onUnload() {
			delListening(this.currentRoutePath)
		},
		methods: {
			getMessageList() {
				// 用户聊天列表
				getMessageList(this.chatUserId, this.nextReqMessageID).then(res => {
					const messageList1 = res.data.messageList.map(m => {
						if(m.payload.extension){
							const data = JSON.parse(m.payload.data)
							return {
								...m,
								payload: {
									...m.payload,
									data
								}
							}
						}else{
							return m
						}
					})
					// delMessage(res.data.messageList)
					if (!this.nextReqMessageID) {
						console.log(res, 'getMessageList');
						this.nextReqMessageID = res.data.nextReqMessageID
						// 把部分自定义消息的json 字符串 转为对象
						this.messageList = messageList1
						// 设置到最底部
						this.$refs.msgList.setScrollBottom(null, false)
						addListening(this.currentRoutePath, this.messageReceived)
					} else {
						console.log('走的下面', this.nextReqMessageID);
						this.nextReqMessageID = res.data.nextReqMessageID
						this.messageList = [...messageList1, ...this.messageList]
					}
					this.isCompleted = res.data.isCompleted
					console.log(this.messageList, 'this.messageListthis.messageList', 'this.nextReqMessageID ',
						this.nextReqMessageID,'this.isCompleted',this.isCompleted);
				})
			},
			// 获取聊天对面的信息
			getFromUserInfo(id) {
				getFriendsInfo([id]).then(res => {
					this.friendInfo = res.data[0]
					console.log(res.data[0], '用户信息');
				})
			},
			// 发送消息
			sendMsg(text, handel) {
				sendMessageToUser(this.chatUserId, {
					text
				}). // 发送成功
				then(res => {
					handel(true)
					this.messageList.push(res.data.message)
					this.$refs.msgList.setScrollBottom(null, true)
					console.log(res, '发送成功返回结果');
				}).catch(err => {
					console.log(err, 'nigaomao ??');
					handel(false)
				})
			},
			// 消息接收
			messageReceived(recived) {
				if (recived.from !== this.chatUserId) {
					return
				}
				let msg = recived
				try {
					const data = JSON.parse(recived.payload.data)
					msg = {
						...recived,
						payload: {
							...recived.payload,
							data
						}
					}
				} catch (e) {}
				this.messageList.push(msg)
				this.$refs.msgList.setScrollBottom(null, true)
			},
			// 加載更多
			loadMore() {
				if (this.isCompleted) {
					return
				}
				this.getMessageList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.chat-one-container {
		.chat-main {
			height: 100%;
			display: flex;
			flex-direction: column;

			.chat-msg-list {
				flex: 1;
				height: 0;
			}
		}
	}
</style>